<!--  -->
<template>
  <div class="box">
    <h3 class="title">圣加仑车间看板</h3>
    <div class="flex height70vh">
      <div class="item">
        <Row :gutter="16">
          <Col span="7"><div class="title-board">工位</div></Col>
          <Col span="7"><div class="title-board">品规</div></Col>
          <Col span="10"><div class="title-board">工艺报警</div></Col>
        </Row>
        <div style="height: 100%; overflow-y: auto">
          <Row :gutter="16" v-for="item in dataSet.tableData" :key="item.id">
            <Col span="7"
              ><div class="col-content">{{ item.values.equipName }}</div></Col
            >
            <Col span="7"
              ><div class="col-content">{{ item.values.paramName }}</div></Col
            >
            <Col span="10"
              ><div class="col-content">实际值：{{ item.values.actual }}，标准值范围：{{ item.values.minParam }}~{{ item.values.maxParam }}</div></Col
            >
          </Row>
        </div>
      </div>
      <div class="item">
        <h3 class="title-board warning-title">当前报警数</h3>
        <p class="warning-num">{{ total }}</p>
      </div>
    </div>
    <div class="footer">
      <p>当前报警信息</p>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import dayjs from "dayjs";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      models: {
        techOverLimit: {
          type: "resource",
          modelType: "resource",
          className: "TechOverLimit",
        },
      },
      dataSet: {
        tableData: [],
      },
      total:0,
    };
  },
  //监听属性 类似于data概念
  computed: {
    pageConfig() {
      return {
        title: {
          "en-US": "",
          "zh-CN": "看板信息",
        }[this.G_Locale],
      };
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    loadPage() {
      let fitler = {
        isOverLimit: "是",
        collectionTime:dayjs().format("YYYY-MM-DD 00:00:00")
      };
      let newFilter = {
        ...fitler,
        className: this.models.techOverLimit.className,
        type: this.models.techOverLimit.type,
      };
      this._$query(this.models["techOverLimit"].clzs, newFilter).then((res) => {
        this.dataSet.tableData = this.models["techOverLimit"].clzs.valueRecords;
        console.log(this.dataSet.tableData);
        this.total = this.dataSet.tableData.length;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.models["techOverLimit"].clzs = this.$modelObject.create(
      this.models["techOverLimit"].modelType + "Collection"
    );
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.loadPage();
  },
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #222a35;
}
.title {
  color: #fff;
  height: 50px;
  line-height: 50px;
  font-size: 40px;
  text-align: center;
  padding: 40px 0;
}
.flex {
  display: flex;
  justify-content: space-between;
  color: #fff;
  box-sizing: border-box;
  width: 100%;
  padding: 2% 5%;
  font-size: 30px;
}
.item:first-of-type {
  width: 70%;
  height: 100%;
  overflow: hidden;
}
.item:nth-of-type(2) {
  width: 20%;
}
.title-board {
  background: #4372c1;
  text-align: center;
}
.col-content {
  text-align: center;
}
.warning-title {
  margin-top: 15%;
}
.warning-num {
  text-align: center;
  height: 120px;
  line-height: 120px;
  font-size: 60px;
}
.height70vh {
  height: 70vh;
}
.footer {
  height: 15vh;
  background: #f00;
  text-align: center;
  font-size: 30px;
  color: #fff;
  line-height: 15vh;
  letter-spacing: 10px;
}
</style>
